<%--
  Created by IntelliJ IDEA.
  User: sofwin
  Date: 2021/9/22
  Time: 11:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath()+"/";%>
<!doctype html>
<html>
<head>
    <base href="<%=path%>">
    <title>部门管理</title>
    <link href="hplus-master/css/bootstrap.min.css?v=3.3.7" rel="stylesheet" />
    <link href="hplus-master/css/font-awesome.min.css?v=4.4.0" rel="stylesheet" />
    <link href="hplus-master/css/animate.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
</head>
<style>
    header{
        height: 60px;
        box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        border-radius: 6px;
        margin: 10px 10px;
        background-color: white;
        line-height: 60px;
        padding-left: 20px;
    }
    body{
        background-color: #f3f3f4;
    }
    #container{
        box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        border-radius: 6px;
        margin: 10px 10px;
        background-color: white;
        height: 80%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .a{
        box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
        border-radius: 6px;
        background-color: white;
        height: 100%;
        margin-top: 10px;
    }
</style>
<body>
            <header>
                <form class="form-inline" id="queryForm">
                    <div class="form-group">
                        <label for="exampleInputName2">部门名称</label>
                        <input type="text" class="form-control" name="deptName" id="exampleInputName2" placeholder="请输入部门名称">
                    </div>
                    <div class="form-group">
                        <label for="status">状态</label>
                        <select class="form-control" id="status" name="status">
                            <option value="-1">--全部--</option>
                            <option value="0">启用</option>
                            <option value="1">停用</option>
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary query" onclick="$.refresh();"><i class="fa fa-search"></i>&nbsp;查询</button>
                    <button type="button" class="btn btn-warning resetButton"><i class="fa fa-recycle"></i>&nbsp;重置</button>
                </form>

            </header>
            <div id="container">
                <div id="toolbar">
                    <button type="button" class="btn btn-info add" onclick="$.operator.openWin('新增用户信息','user/toEdit')" ><i class="fa fa-plus"></i>新增</button>
                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning edit" id="edit" disabled><i class="fa fa-edit"></i> 编辑</button>
                    <!-- Indicates a dangerous or potentially negative action -->
                    <button type="button" class="btn btn-danger deletes" id="deletes" disabled><i class="fa fa-trash-o"></i> 删除</button>
                    <button type="button" class="btn btn-danger deletes" id="expendOrCol"><i class="fa fa-trash-o"></i> 展开/折叠</button>
                </div>
                <table id="table"></table>
            </div>



<!-- 全局js -->
<script src="hplus-master/js/jquery.min.js?v=2.1.4"></script>
<script src="hplus-master/js/plugins/layer/layer.min.js"></script>
<script src="hplus-master/js/bootstrap.min.js?v=3.3.7"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/js/jquery.treegrid.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.js"></script>
            <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<script src="js/sofwin.js"></script>

</body>
<script>
    var $table = $('#table')
    var flag =0;
    var _table;
    $(function() {
        let options ={
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'deptName',
                    title: '部门名称'
                },
                {
                    field:'deptCode',
                    title:'部门编号'
                },
                {
                    field: 'deptMonitor',
                    title: '部门负责人'
                },
                {
                    field: 'status',
                    title: '状态',
                    sortable: true,
                    align: 'center',
                    formatter: 'statusFormatter'
                },
                {
                    title: '操作',
                    width:'80px',
                    align:'center',
                    formatter:function(value,row,index){
                        let userId;
                        return '<a  href="javascript:void(0);" title="編輯" onclick="$.operator.openWin(\'编辑用户信息\',\'user/toEdit?userId='+userId+'\');"><i class="fa fa-edit"></i></a>&nbsp;&nbsp;'+'<a  href="javascript:void(0)" onclick="deleteById('+userId+');" title="刪除"><i class="fa fa-trash-o"></i></a>';
                    }
                }
            ],
            url: 'dept/data',
            idField: 'deptId',
            // 规定在哪一列上出现树状节点的图标
            treeShowField: 'deptName',
            parentIdField: 'parentId',
        };
        $.initTableTree(options);

    })

    function statusFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="label label-success">正常</span>'
        }
        return '<span class="label label-default">锁定</span>'
    }
    $(function(){
        $("#expendOrCol").click(function () {

            if(flag==0){
                _table.treegrid('collapseAll');
                flag=1;
            }else{
                _table.treegrid('expandAll');
            }
        });
    })
</script>

</html>
